<template>
  <div class="home_div">
    <div class="video-container">
      <VideoPlayer
        :src="videoUrl"
        :width="1920"
        :height="1080"
        :autoplay="true"
        @ready="onVideoReady"
        @error="onVideoError"
        class="video-player"
      />
    </div>
    
    <!-- 视频控制面板 -->
    <div class="video-controls">
      <el-button 
        type="primary" 
        size="small" 
        @click="togglePlay"
        :icon="isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"
      >
        {{ isPlaying ? '暂停' : '播放' }}
      </el-button>
      
      <el-button 
        type="info" 
        size="small" 
        @click="reloadVideo"
        icon="el-icon-refresh"
      >
        重新加载
      </el-button>
      
      <el-tag 
        :type="streamStatus === 'connected' ? 'success' : 'danger'"
        size="small"
      >
        {{ streamStatusText }}
      </el-tag>
    </div>
    
    <!-- 错误提示 -->
    <div v-if="errorMessage" class="error-panel">
      <el-alert
        :title="errorMessage"
        type="error"
        :closable="false"
        show-icon
      />
      <div class="error-help">
        <p>RTSP流无法直接播放，需要转码服务支持：</p>
        <ol>
          <li>确保后端配置了FFmpeg转码服务</li>
          <li>检查网络连接是否正常</li>
          <li>验证RTSP流地址是否有效</li>
        </ol>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import VideoPlayer from '@/components/VideoPlayer.vue'
// import { formatVideoUrl, checkVideoStream } from '@/utils/videoHelper'

// 视频URL
const videoUrl = ref('rtsp://223.113.67.182:554/openUrl/GANukmY')

// 状态管理
const isPlaying = ref(false)
const streamStatus = ref('loading')
const errorMessage = ref('')
const playerRef = ref(null)

// 计算属性
const streamStatusText = computed(() => {
  switch (streamStatus.value) {
    case 'connected':
      return '已连接'
    case 'loading':
      return '连接中...'
    case 'error':
      return '连接失败'
    default:
      return '未知状态'
  }
})

// 视频准备就绪
const onVideoReady = (player) => {
  console.log('视频播放器准备就绪')
  playerRef.value = player
  isPlaying.value = true
  streamStatus.value = 'connected'
  errorMessage.value = ''
}

// 视频错误处理
const onVideoError = (error) => {
  console.error('视频播放错误:', error)
  streamStatus.value = 'error'
  errorMessage.value = '视频流加载失败，请检查网络连接和流地址'
  isPlaying.value = false
}

// 切换播放/暂停
const togglePlay = () => {
  if (playerRef.value) {
    if (isPlaying.value) {
      playerRef.value.pause()
    } else {
      playerRef.value.play()
    }
    isPlaying.value = !isPlaying.value
  }
}

// 重新加载视频
const reloadVideo = async () => {
  errorMessage.value = ''
  streamStatus.value = 'loading'
  
  try {
    // 检查视频流是否可用
    const isAvailable = await checkVideoStream(formatVideoUrl(videoUrl.value))
    if (!isAvailable) {
      throw new Error('视频流不可用')
    }
    
    // 重新加载播放器
    if (playerRef.value) {
      playerRef.value.src({
        src: formatVideoUrl(videoUrl.value),
        type: 'application/x-mpegURL'
      })
      playerRef.value.play()
    }
  } catch (error) {
    console.error('重新加载失败:', error)
    errorMessage.value = '重新加载失败: ' + error.message
  }
}

// 检查视频流
const checkStream = async () => {
  try {
    const isAvailable = await checkVideoStream(formatVideoUrl(videoUrl.value))
    if (!isAvailable) {
      throw new Error('RTSP流地址无法访问')
    }
  } catch (error) {
    console.warn('流检查失败:', error)
    // 继续尝试播放，让播放器处理错误
  }
}

onMounted(() => {
  console.log('RTSP视频播放器初始化...')
  checkStream()
})

onUnmounted(() => {
  if (playerRef.value) {
    playerRef.value.dispose()
  }
})
</script>

<style scoped>
.home_div {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  background: #000;
}

.video-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 5px;
}

.error-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.error-help {
  margin-top: 15px;
  font-size: 14px;
  color: #666;
}

.error-help ol {
  margin: 10px 0;
  padding-left: 20px;
}

.error-help li {
  margin: 5px 0;
}

:deep(.video-js) {
  width: 100% !important;
  height: 100% !important;
}

:deep(.vjs-tech) {
  object-fit: cover;
}
</style>